import { defineComponent, reactive, ref } from 'vue'

import { ElNotification } from 'element-plus'
export default defineComponent({
  setup(props, { expose }) {
    const state: any = reactive({
      notify: {
        title: '',
        duration: 0,
        position: 'top-right',
        type: 'warning'
      }
    })

    const mapObj: any = ref({})
    const msg: any = ref({
      warning: '正在下发命令',
      error: '设备响应超时',
      success: '下发成功'
    })
    const initMes = (setting: any) => {
      // 初始化方法
      const set = {
        deviceId: setting.deviceId, // 唯一识别字段
        commancode: setting.commandCode,
        token: setting.token,
        callBack: setting.callBack || function () {}, // 回调
        arrStr: setting.arrStr || '', // 批量命令,如果为逗号分隔字符串，则显示进度条
        title: setting.title,
        isShow: true,
        key: setting.key
      }
      // 下发指令
      msgAjax(set)
    }
    const msgAjax = (data: any) => {
      const set = Object.assign({}, data)
      // 消息通知
      state.notify = {
        title: set.title,
        duration: 0,
        position: 'top-right',
        type: 'warning'
      }
      // 批量 操作有进度条
      const arrMap: any = {} // 批量的 Id
      const arr = set.arrStr.split(',') // 字符串转数组
      if (arr.length >= 1) {
        arr.forEach((v: any) => {
          arrMap[v] = false
        })
        state.notify.dangerouslyUseHTMLString = true // 设置提示窗的 备注是 读html标签
        state.notify.message = messageHtmlFun(null, arr.length)
      }
      // 缓存mapObj
      const thisSet = {
        // obj:(param:any)=>{ElNotification(param)},
        obj: ElNotification(state.notify),
        state: 0, // 当前组件转改为已发送 待接收
        arrMap // 数组
      }
      mapObj.value[set.key] = thisSet // 缓存

      setTimeout(() => {
        mapObj.value[set.key].obj.close()
      }, 30000)
      set.callBack() // 回调
    }

    // 改变弹窗状态
    const stateFun = (setting: any) => {
      const set = {
        key: setting.key, // 弹窗标识
        state: setting.state || 'success',
        id: setting.id || '', // 批量操作用 ws上来的msg_uid
        errText: setting.errText || '',
        title: setting.title
      }
      // 是否存在这个弹窗
      if (!mapObj.value[set.key]) {
        return
      }

      switch (set.state) {
        case 'success':
          mapObj.value[set.key].state = 1 // 改变当前组件转改为成功
          // mapObj.value[set.key].obj.type = set.state;
          // mapObj.value[set.key].obj.message = msg.value[set.state];
          mapObj.value[set.key].obj.close()
          mapObj.value[set.key].obj = ElNotification({
            duration: 0,
            position: 'top-right',
            type: set.state,
            title: set.title,
            message: msg.value[set.state]
          })
          // state.notify = {
          //   duration: 0,
          //   position: "top-right",
          //   type:set.state,
          //   message:msg.value[set.state]
          // }
          // mapObj.value[set.key].obj(state.notify)
          // 关闭
          setTimeout(() => {
            mapObj.value[set.key].obj.close()
          }, 2000)
          break
        case 'error':
          mapObj.value[set.key].state = 1 // 改变当前组件转改为成功
          mapObj.value[set.key].obj.type = set.state
          mapObj.value[set.key].obj.message = set.errText
          break
      }
    }
    // 进度条
    const messageHtmlFun = (key: any, initCount: number) => {
      let len = 0
      let count = 0
      let val = 0
      if (key != null) {
        // 处理
        mapObj.value[key].arrMap.forEach((i: any, v: any) => {
          count += 1
          if (v === true) {
            len += 1
          }
        })
        val = parseInt(((len / count) * 100).toString())
        if (len === count) {
          // 批量的 全部返回之后  要关闭 弹窗
          setTimeout(() => {
            mapObj.value[key].obj.close()
          }, 5000)
        }
      } else {
        // 初始化
        count = initCount
      }
      // 显示进度条时，如果全部成功加一个回调
      // if (len == count) {
      //   this.$emit('multipleSuccess')
      // }
      return `<div role="progressbar" style="width:250px" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="el-progress el-progress--line">
         <div class="el-progress-bar" style="padding-right: 100px;margin-right: -100px;>
         <div class="el-progress-bar__outer" style="height: 6px;">
         <div class="el-progress-bar__inner" style="transition:all 1s;width:${val}%;">
         </div>
         </div>
         </div>
         <div class="el-progress__text" style="font-size: 14.4px;">${val}%(${len}/${count})</div>
         </div>
      `
    }
    expose({ initMes, stateFun })
    return () => {
      <></>
    }
  }
})
